<template>
  <el-sub-menu :key="menu.name" :index="menu.id!.toString()" v-if="menu.type == 0">
    <template #title>
      <el-icon>
        <House />
      </el-icon>
      <span>{{ menu.name }}</span>
    </template>

    <div v-if="menu.type == 0">
      <sys-menu-item v-for="c in menu.children" :menu="c" />
    </div>
  </el-sub-menu>

  <el-menu-item v-if="menu.type != 0" @click="toLink" :index="menu.id!.toString()">
    <el-icon>
      <location />
    </el-icon>
    <span>{{ menu.name }}</span>
  </el-menu-item>
</template>

<script setup lang="ts">
import { Location, House } from '@element-plus/icons-vue'
import { IMenu } from "@/api/menu/type"
import { useTagsViewStore } from "@/store/useTagsStore"

const props = defineProps({
  menu: {
    type: Object as () => IMenu,
    default: {}
  }
})

var tags = useTagsViewStore();

const toLink = () => {
  tags.addTag(props.menu);
};
</script>